<!-- html -->
<template>
    <h1 class="h1">选项式API</h1>
    <span class="span2">num1：</span>
    <input class="input1" type="number" v-model="num1">
    <span class="span2">num2：</span>
    <input class="input1" type="number" v-model="num2">
    <button class="button1" @click="changeNum1">修改num1</button>
    <button class="button1" @click="showSum">查看和</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
    //组件名
    name: 'optionHome',
    //数据
    data() {
        return {
            num1: 1,
            num2: 1,
        }
    },
    //方法
    methods: {
        changeNum1() {
            this.num1 += 1
        },
        showSum() {
            alert(this.num1 + this.num2)
        }
    }
}
</script>

<!-- 样式 -->
<style scoped></style>